<template>
  <!-- 一开始引入到app.vue文件下，通过teleport瞬移到id为modal的div下 这个div放在index.html下 -->
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <!-- 通过slot可以自定义内容 -->
      <h2>
        <slot>this is a modal</slot>
      </h2>
      <button @click="buttonClick">close</button>
      <p>{{ lang }}</p>
      <p>{{ langValue }}</p>
      <p>{{ currentUser && currentUser.name }}</p>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, inject } from "vue";
export default defineComponent({
  props: {
    isOpen: Boolean,
  },
  //vue3新添加emits属性
  emits: {
    // 'close-modal':(payload:any)=>{
    //   return payload.type === 'close';
    // }
    'close-modal': null
  },
  setup(props, context) {
    // context.emit('close-modal', {
    //   type: 'hello'
    // })
    // context.emit('close-modal')
    const buttonClick = () => {
      console.log(props.isOpen, 'props.isOpen');
      context.emit('close-modal');
    }

    //inject 拿到provide提供的数据
    const lang = inject('lang');
    const langValue = inject('langValue');

    const currentUser = inject<{ name: string }>('currentUser');


    return {
      buttonClick,
      lang,
      langValue,
      currentUser
    }
  }

});
</script>
<style>
#center {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: pink;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>
